<template>
  <view class="he-clear-storage">
    <he-empty-popup
      v-model="showModal"
      title="清除缓存可能需要一些时间，清除过程中请耐心等待"
      @confirm="confirm"
      :empty-style="emptyStyle"
    ></he-empty-popup>
    <he-toast v-model="showClear">
      <view class="he-clear-toast flex flex-direction align-center">
        <template v-if="loading">
          <image class="he-loading" :src="ipAddress + '/toast-gif-loading.gif'"></image>
          <view class="he-text">正在清除缓存...</view>
        </template>
        <template v-else>
          <view class="iconfont iconbtn_select"></view>
          <view class="he-text he-text__margin">清除缓存已完成</view>
        </template>
      </view>
    </he-toast>
  </view>
</template>
<script>
import heToast from './he-toast.vue';
import heEmptyPopup from './he-empty-popup.vue';

export default {
  name: 'he-clear-storage',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      showClear: false,
      emptyStyle: {
        height: '179rpx',
        padding: '64rpx 54rpx 0 54rpx'
      }
    };
  },
  components: {
    heToast,
    heEmptyPopup
  },
  computed: {
    showModal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    open: function () {
      let _this = this;
      for (let key in this.$storageKey) {
        uni.removeStorageSync(key);
      }
      // uni.clearStorage();
      _this.$store.dispatch('setting/getSetting');
      _this.$store.dispatch('goods/emptyShareGoods');
      _this.$store.dispatch('setting/getTheme');
      _this.$store.dispatch('setting/getTabBar');
      /**
       * 处理清除缓存后重新加载插件信息
       */
      _this.$store.dispatch('plugins/getPlugins');
      setTimeout(function () {
        _this.loading = false;
        setTimeout(function () {
          _this.showClear = false;
          _this.loading = true;
        }, 1000);
      }, 3000);
    },
    confirm: function () {
      this.showClear = true;
      this.open();
    }
  }
};
</script>

<style scoped lang="scss">
.he-clear-toast {
  width: 100%;
  height: 100%;
}

.he-loading {
  width: 96px;
  height: 96px;
  margin-top: 52px;
}

.he-text {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin-top: 43px;
}

.he-text__margin {
  margin-top: 50px;
}

.iconbtn_select {
  width: 68px;
  height: 68px;
  font-size: 68px;
  color: #ffffff;
  margin-top: 69px;
}
</style>
